

import { ArrowLeft, FaceSmile } from '@nutui/icons-react'
import { useLocation, useNavigate } from 'react-router-dom';
import { http } from '../../utils'
import { ConfigProvider, Tabs, NavBar, Card, TabPane, Empty } from '@nutui/nutui-react'
import { useState } from 'react';
import { HeartFill } from '@nutui/icons-react'
import { Typography, Divider } from 'react-vant'
import { useDispatch, useSelector } from 'react-redux';
import { AddGoodCollect, DelGoodCollect, AddBusinessCollect } from '../../redux2/modules/cart';
const ShowCollect = ({ }) => {
    const navigate = useNavigate();
    const location = useLocation();
    const dispatch = useDispatch();
    const collectGoodList = useSelector((store) => store.carts.collectGoodList)
    const collectBusinessList = useSelector((store) => store.carts.collectBusinessList)
    const [tab1value, setTab1value] = useState('0')
    const [showDark, setShowDark] = useState(false)

    const darkTheme = {
        nutuiNavbarBackground: '#ffffff',
        nutuiTabsTitlesHeight: "0.6rem",
        nutuiTabsTitlesBackgroundColor: "#ffffff",
        nutuiCardBorderRadius: '0.1rem',
        nutuiEmptyBackgroundColor: '#f7f7f7'
    };

    return (
        <div style={{ height: "100vh", backgroundColor: '#f7f7f7' }}>
            <ConfigProvider theme={darkTheme}>
                <div style={{ paddingTop: "0.15rem", backgroundColor: "white" }}>
                    <NavBar
                        back={<ArrowLeft />}
                        onBackClick={(e) => navigate('/outlet/MySelf')}
                    >
                        我的收藏
                    </NavBar>
                    <Tabs
                        value={tab1value}
                        onChange={(value) => {
                            console.log(value);
                            setTab1value(value)
                        }}
                    >
                        <Tabs.TabPane title="商品收藏"></Tabs.TabPane>
                        <Tabs.TabPane title="店铺收藏"></Tabs.TabPane>
                    </Tabs>
                </div>
                {/* <button onClick={()=>{dispatch(AddBusinessCollect({
                    name:"华莱士",
                    _id:'111',

                }))}}>添加</button> */}
                <div style={{ padding: "0 0.2rem" }} >
                    {
                        tab1value == 0 ? (
                            collectGoodList.length == 0 ?
                                <Empty description="无数据" size='base' />
                                :
                                <>
                                    {collectGoodList.map((item, index) => {
                                        return (
                                            <div
                                                key={index}
                                                style={{
                                                    marginTop: "0.1rem",
                                                    backgroundColor: "white",
                                                    borderRadius: "0.1rem",
                                                    overflow: "hidden",
                                                    position: 'relative',
                                                    paddingTop: "0.15rem"
                                                }}
                                            >
                                                <Card
                                                    style={{ backgroundColor: "white", overflow: 'hidden' }}
                                                    src={item.img}
                                                    title={<b style={{ fontSize: "0.2rem" }}>{item.name}</b>}
                                                    price={item.price * 0.8}
                                                    vipPrice={item.price}
                                                    shopDescription={<span style={{ fontSize: "0.12rem" }}>8折</span>}
                                                    description={
                                                        <span style={{ fontSize: "0.12rem", color: "#797979" }}>月售99+</span>
                                                    }
                                                />
                                                <div
                                                    style={{
                                                        display: "flex",
                                                        justifyContent: "space-between",
                                                        alignItems: "center",
                                                        height: "0.3rem",
                                                        padding: "0 0.1rem",

                                                    }}
                                                >
                                                    <div style={{ width: "45%" }}>
                                                        <Typography.Text ellipsis>
                                                            {'华莱士asdfasfasfasdfasdfasdfasfasdfasdf'}
                                                        </Typography.Text>
                                                    </div>
                                                    <div>
                                                        <span style={{ fontSize: "0.13rem", color: "red" }}>4.5分</span>
                                                        <span style={{ fontSize: "0.13rem", color: "#757575", margin: "0 0.1rem" }}>配送4元</span>
                                                        <span style={{ fontSize: "0.13rem", color: "#757575" }}>30分钟</span>
                                                    </div>
                                                </div>
                                                <span style={{ position: 'absolute', top: "0.2rem", right: "0.2rem" }}>
                                                    <HeartFill onClick={() => {
                                                        dispatch(DelGoodCollect(item._id))
                                                    }} />
                                                </span>

                                            </div>
                                        )
                                    })}
                                    <p style={{textAlign:"center",fontSize:"0.14rem",color:"#828282",lineHeight:'0.5rem',}}>已经到底了~亲</p>
                                </>
                        )
                            :
                            (
                                collectBusinessList.length == 0 ?
                                    <Empty
                                        description="店铺为空"
                                        size='base'
                                        image={
                                            <img
                                                src="https://storage.360buyimg.com/imgtools/44f3cc10c4-0cf9a7e0-c0ac-11ee-8375-193101bb1a46.png"
                                                alt=""
                                            />
                                        }
                                    />
                                    :
                                    (
                                        <>
                                            {collectBusinessList.map((item, index) => {
                                                return (
                                                    <div
                                                        key={index}
                                                        style={{
                                                            display: 'flex',
                                                            marginTop: "0.1rem",
                                                            backgroundColor: "white",
                                                            borderRadius: "0.1rem",
                                                            overflow: "hidden",
                                                            padding: "0.15rem"
                                                        }}
                                                    >
                                                        <div
                                                            style={{
                                                                width: "1rem",
                                                                height: "1rem",
                                                            }}
                                                        >
                                                            <img style={{ maxWidth: "100%", maxHeight: "100%" }} src="../../../public/bg1.png" alt="" />
                                                        </div>
                                                        <div
                                                            style={{ marginLeft: '0.1rem' }}
                                                        >
                                                            <h2 style={{ lineHeight: '0.25rem' }}>{item.name}</h2>
                                                            <p style={{ lineHeight: '0.25rem' }}>
                                                                <span style={{ fontSize: "0.14rem", color: "red" }}>4.5分</span>
                                                                <span style={{ fontSize: "0.14rem", color: "#828282", margin: " 0 0.1rem" }}>月售502</span>
                                                                <span style={{ fontSize: "0.14rem", color: "#828282" }}>人均￥45</span>
                                                            </p>
                                                            <p style={{ lineHeight: '0.25rem' }}>
                                                                <span style={{ fontSize: "0.14rem", color: "#828282", marginRight: "0.1rem" }}>起送￥20</span>
                                                                <span style={{ fontSize: "0.14rem", color: "#828282", marginRight: "0.1rem" }}>免费配送</span>
                                                                <span style={{ fontSize: "0.14rem", color: "#828282", marginRight: "0.1rem" }}>20分钟</span>
                                                                <span style={{ fontSize: "0.14rem", color: "#828282", marginRight: "0.1rem" }}>2.2km</span>
                                                            </p>
                                                            <p style={{ lineHeight: '0.25rem' }}>
                                                                <span style={{ fontSize: "0.14rem", color: "red", border: "1px solid red", borderRadius: '0.04rem' }}>50减3</span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                )
                                            })}
                                            <p style={{ textAlign: "center", fontSize: "0.14rem", color: "#828282", lineHeight: '0.5rem', }}>已经到底了~亲</p>
                                        </>
                                    )
                            )

                    }
                </div>
            </ConfigProvider>
        </div>
    )
}
export default ShowCollect;
const list = [
    { "name": "新原味肠粉", "price": 10, "img": "/imgs/food1.png", "tid": "67b4647d7c5e12eec6c0f13f", "type": 1 },
    { "name": "新辣味肠粉", "price": 10, "img": "/imgs/food2.png", "tid": "67b4647d7c5e12eec6c0f13f", "type": 1 },
    { "name": "新甜味肠粉", "price": 10, "img": "/imgs/food3.png", "tid": "67b4647d7c5e12eec6c0f13f", "type": 1 },
    { "name": "新品西红柿盖饭", "price": 12, "img": "/imgs/food1.png", "tid": "67b4647d7c5e12eec6c0f140", "type": 1 },
    { "name": "新品土豆盖饭", "price": 12, "img": "/imgs/food2.png", "tid": "67b4647d7c5e12eec6c0f140", "type": 1 },
    { "name": "新品牛肉盖饭", "price": 12, "img": "/imgs/food3.png", "tid": "67b4647d7c5e12eec6c0f140", "type": 2 },
    { "name": "新品西红柿鸡蛋面", "price": 9, "img": "/imgs/food1.png", "tid": "67b4647d7c5e12eec6c0f141", "type": 2 },
    { "name": "新品土豆鸡蛋面", "price": 9, "img": "/imgs/food2.png", "tid": "67b4647d7c5e12eec6c0f141", "type": 2 },
    { "name": "新品番茄鸡蛋面", "price": 9, "img": "/imgs/food3.png", "tid": "67b4647d7c5e12eec6c0f141", "type": 2 },
    { "name": "新品可乐", "price": 3, "img": "/imgs/food1.png", "tid": "67b4647d7c5e12eec6c0f142", "type": 2 },
    { "name": "新品雪碧", "price": 3, "img": "/imgs/food2.png", "tid": "67b4647d7c5e12eec6c0f142", "type": 2 },
    { "name": "新品加多宝", "price": 3, "img": "/imgs/food3.png", "tid": "67b4647d7c5e12eec6c0f142", "type": 2 }
]
const itemList = [
    { key: 1, naem: "取消收藏" }
]




